import { Popover, Progress, Modal } from "antd";
import { loginOut } from "@/store/modules/user";
import { useDispatch } from "react-redux";
import {
  RightOutlined,
  UserOutlined,
  GiftOutlined,
  ContainerOutlined,
  CrownOutlined,
  BookOutlined,
  RedEnvelopeOutlined,
  FlagOutlined,
  MergeOutlined,
} from "@ant-design/icons";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import userInfoCardLess from "./index.module.less";

function userInfoCard(props: any) {
  const dispatch = useDispatch();
  const [open, setOpen] = useState(false);
  const navigate = useNavigate();
  const handleOk = () => {
    setOpen(true);
    dispatch(loginOut());
  };
  const handleCancel = () => {
    setOpen(false);
  };
  const myhome = () => {
    navigate("/myhome");
  };
  const content = (
    <div className={userInfoCardLess.all_user_info}>
      <div className="topMessage">
        <div className="left_img">
          <img src={props.headerImg} alt="" />
        </div>
        <div className="right_info">
          <div className="r_top_name">{props.username}</div>
          <div className="bot">
            矿石: 0
            <RightOutlined className="icon" />
          </div>
        </div>
      </div>
      <div className="grade">
        <div className="top_process">
          <div className="left_grade">
            掘友登记<span>JY.10</span>
          </div>
          <div className="right_process">80/1500</div>
        </div>
        <div className="bottom_process">
          <Progress percent={10} showInfo={false} size="small" />
        </div>
      </div>
      <div className="likeAndGet">
        <div className="item">
          <div className="num">0</div>
          <div className="title_name">关注</div>
        </div>
        <div className="item">
          <div className="num">0</div>
          <div className="title_name">赞过</div>
        </div>
        <div className="item">
          <div className="num">0</div>
          <div className="title_name">收藏</div>
        </div>
      </div>
      <div className="others_list">
        <div className="ltem_span">
          <div className="others_item" onClick={myhome}>
            <UserOutlined className="other_icon" />
            <span className="title_icon">我的主页</span>
          </div>
          <div className="others_item">
            <GiftOutlined className="other_icon" />
            <span className="title_icon">成长福利</span>
          </div>
        </div>
        <div className="ltem_span">
          <div className="others_item">
            <ContainerOutlined className="other_icon" />
            <span className="title_icon">闪念笔记</span>
          </div>
          <div className="others_item">
            <CrownOutlined className="other_icon" />
            <span className="title_icon">会员中心</span>
          </div>
        </div>
        <div className="ltem_span">
          <div className="others_item">
            <BookOutlined className="other_icon" />
            <span className="title_icon">课程中心</span>
          </div>
          <div className="others_item">
            <RedEnvelopeOutlined className="other_icon" />
            <span className="title_icon">我的优惠</span>
          </div>
        </div>
        <div className="ltem_span">
          <div className="others_item">
            <FlagOutlined className="other_icon" />
            <span className="title_icon">我的报名</span>
          </div>
          <div className="others_item">
            <MergeOutlined className="other_icon" />
            <span className="title_icon">我的足迹</span>
          </div>
        </div>
      </div>
      <div className="userInfoCard_bottom">
        <div className="userInfoCard_setting">我的设置</div>
        <div className="userInfoCard_out" onClick={() => setOpen(true)}>
          退出登录
        </div>
      </div>
    </div>
  );
  return (
    <>
      <Popover content={content} trigger="click">
        <div className="user_header_img">
          <img src={props.headerImg} alt="" />
        </div>
      </Popover>
      <Modal
        title={"退出提醒"}
        open={open}
        onOk={handleOk}
        onCancel={handleCancel}
        centered
      >
        确定退出吗？每一片贫瘠的土地都需要坚定的挖掘者！
      </Modal>
    </>
  );
}

export default userInfoCard;
